<style lang="scss" scoped>
  @import "@/assets/css/index";
  .panle_list{
    @include pageBottom();
    padding: 15px 10px;
    .panle_one {
      box-sizing: border-box;
      // height: 6rem;
      background-color: white;
      border-radius: 8px;
      .panle_up {
        display: flex;
        align-items: center;
        padding: 6px 10px;
        font-size: 15px;
        span {
          margin: 0 4px;
          font-weight: 600;
        }
        p {
          font-size: 14px;
        }
      }
      .panle_dwon {
        text-align: center;
        height: 3rem;
        line-height: 3rem;
        font-size: 18px;
        color: #565656;
      }
    }

    .today {
      margin: 10px 0;
      :nth-child(1) {
        display: inline-block;
        width: 3px;
        height: 12px;
        background-color: #fd7915;
        margin-right: 5px;
      }
      :nth-child(2) {
        font-weight: 600;
      }
    }

    .panle_two {
      box-sizing: border-box;
      display: flex;
      justify-content: space-around;
      width: 100%;
      color: #565656;
      // height: 11rem;
      border-radius: 8px;
      background-color: white;
      .panle_item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        padding: 1rem 0;
        font-size: 1.2rem;
        .cap-title {
          margin-top: 1rem;
        }
      }
    }
  }
</style>

<template>
  <div class="panle_list">
    <BarNav></BarNav>
    <div class="panle_one">
      <div class="panle_up">
        <van-icon name="shop-collect" :color="$store.getters.getMasterColor"/>
        <span>商家：</span>
        <p :style="{color: $store.getters.getMasterColor}">{{userInfo.name}}</p>
      </div>
      <div class="panle_dwon">{{item.title}}</div>
    </div>
    <div class="today">
       <span></span>
       <span>今日数据</span>
    </div>
    <div class="panle_two">
      <div class="panle_item"> 
        <span>{{ todayData.staff_invitation || 0 }}</span>
        <span class="cap-title">邀请人数</span>
      </div>
      <div class="panle_item"> 
        <span>{{ todayData.staff_sign || 0 }}</span>
        <span class="cap-title">报名人数</span>
      </div>
      <div class="panle_item"> 
        <span>{{ todayData.staff_pay || 0 }}</span>
        <span class="cap-title">支付人数</span>
      </div>
      <div class="panle_item"> 
        <span>{{ todayData.staff_price || 0 }}</span>
        <span class="cap-title">支付金额</span>
      </div>
    </div>
    <div class="today">
       <span></span>
       <span>累计数据</span>
    </div>
    <div class="panle_two">
      <div class="panle_item"> 
        <span>{{ grandData.staff_invitation || 0 }}</span>
        <span class="cap-title">邀请人数</span>
      </div>
      <div class="panle_item"> 
        <span>{{ grandData.staff_sign || 0 }}</span>
        <span class="cap-title">报名人数</span>
      </div>
      <div class="panle_item"> 
        <span>{{ grandData.staff_pay || 0 }}</span>
        <span class="cap-title">支付人数</span>
      </div>
      <div class="panle_item"> 
        <span>{{ grandData.staff_price || 0 }}</span>
        <span class="cap-title">支付金额</span>
      </div>
    </div>
  </div>
</template> 
<script>
import BarNav from "@/components/BarNav"

export default {
  name: "myActivity",
  components: {
    BarNav
  },
  computed: {

  },
  data() {
    return {
      item: {},
      merchant_id: null,
      openid: '',
      activity_id: null,
      // 今日数据
      todayData: {},
      // 累计数据
      grandData: {},
      userInfo: {}
    }
  },
  created () {
    if (process.env.NODE_ENV == "production") {
      //线上环境
      this.openid = localStorage.getItem("OPENID") || "没获取到";
    } else {
      this.openid = this.$store.state.openid || localStorage.getItem("OPENID");
    }
    this.item = this.$store.state.activityData
    this.merchant_id = this.$route.query.merchant_id
    this.activity_id = this.$route.query.activity_id
    this.userInfo = this.$store.state.userInfo;
    console.log(this.merchant_id,this.activity_id,this.userInfo,' this.$route.query');
    this.getStaffItemact()
  },
  methods: {
    getStaffItemact() {
      let params = {
        merchant_id: this.merchant_id,
        activity_id: this.activity_id,
        openid: this.openid
      }
      this.$request.getStaffItemact(params).then(res => {
        console.log(res.data);
        this.todayData = res.data.JRSJ
        this.grandData = res.data.SYSJ
      })
    }
  }
};
</script>
